<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.layout.HBoxLayout-props"><img src="images/default/s.gif" class="item-icon icon-prop">Properties</a>&#13;<a class="inner-link" href="#Ext.layout.HBoxLayout-methods"><img src="images/default/s.gif" class="item-icon icon-method">Methods</a>&#13;<a class="inner-link" href="#Ext.layout.HBoxLayout-events"><img src="images/default/s.gif" class="item-icon icon-event">Events</a>&#13;<a class="inner-link" href="#Ext.layout.HBoxLayout-configs"><img src="images/default/s.gif" class="item-icon icon-config">Config Options</a>&#13;<a class="bookmark" href="../docs/?class=Ext.layout.HBoxLayout"><img src="images/default/s.gif" class="item-icon icon-fav">Direct Link</a>&#13;</div><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.layout.Layout.html" ext:member="" ext:cls="Ext.layout.Layout">Layout</a>
  <img src="resources/elbow-end.gif"><a href="output/Ext.layout.ContainerLayout.html" ext:member="" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a>
    <img src="resources/elbow-end.gif"><a href="output/Ext.layout.BoxLayout.html" ext:member="" ext:cls="Ext.layout.BoxLayout">BoxLayout</a>
      <img src="resources/elbow-end.gif">HBoxLayout</pre></div><h1>Class <a href="source/BoxLayout.html#cls-Ext.layout.HBoxLayout">Ext.layout.HBoxLayout</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.layout</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/BoxLayout.html#cls-Ext.layout.HBoxLayout">BoxLayout.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/BoxLayout.html#cls-Ext.layout.HBoxLayout">HBoxLayout</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.layout.BoxLayout.html" ext:cls="Ext.layout.BoxLayout" ext:member="">BoxLayout</a></td></tr></table><div class="description"><p>A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal
space between child items containing a numeric <code>flex</code> configuration. The flex option is a ratio that
distributes width after any items with explicit widths have been accounted for. In the code below, the width is calculated
as follows:
<ul>
<li>The fixed width item is subtracted, leaving us with 300 width</li>
<li>The total flex number is counted, in this case, it is 3</li>
<li>The ratio is then calculated, 300 / 3 = 100</li>
<li>The first item has a flex of 2, so it is set to 2 * 100</li>
<li>The other remaining item is set to 1 * 100</li>
</ul></p>
<pre><code><b>new</b> Ext.Container({
    width: 400,
    height: 300,
    layout: {
        type: <em>'hbox'</em>,
        align: <em>'stretch'</em>
    },
    items: [{
        flex: 2,
        html: <em>'First'</em>
    },{
        width: 100,
        html: <em>'Second'</em>
    },{
        flex: 1,
        html: <em>'Third'</em>
    }]
});</code></pre>
This layout may also be used to set the heights of child items by configuring it with the <a href="output/Ext.layout.HBoxLayout.html#Ext.layout.HBoxLayout-align" ext:member="align" ext:cls="Ext.layout.HBoxLayout">align</a> option.</div><div class="hr"></div><a id="Ext.layout.HBoxLayout-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.HBoxLayout-align"></a><b><a href="source/BoxLayout.html#cfg-Ext.layout.HBoxLayout-align">align</a></b> : String<div class="mdesc"><div class="short">Specifies the vertical alignment of child components. Defaults to 'center'. Acceptable values are:

center : &lt;div cla...</div><div class="long">Specifies the vertical alignment of child components. Defaults to <tt>'center'</tt>. Acceptable values are:
<ul>
<li><b>center</b> : <div class="sub-desc">
Aligned to the center of the container.
</div></li>
<li><b>end</b> : <div class="sub-desc">
Aligned to the bottom of the container.
</div></li>
<li><b>start</b> : <div class="sub-desc">
Aligned to the top of the container.
</div></li>
<li><b>stretch</b> : <div class="sub-desc">
Components are stretched vertically to fill the container.
</div></li>
</ul></div></div></td><td class="msource">HBoxLayout</td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.BoxLayout-direction"></a><b><a href="source/BoxLayout.html#cfg-Ext.layout.BoxLayout-direction">direction</a></b> : String<div class="mdesc"><div class="short">Specifies the direction in which child components are laid out. Defaults
to 'normal', which means they are laid out i...</div><div class="long">Specifies the direction in which child components are laid out. Defaults
to <tt>'normal'</tt>, which means they are laid out in the order they are added. You can use the
<tt>'reverse'</tt> option to have them laid out in reverse.</div></div></td><td class="msource"><a href="output/Ext.layout.BoxLayout.html#direction" ext:member="#direction" ext:cls="Ext.layout.BoxLayout">BoxLayout</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.ContainerLayout-itemCls"></a><b><a href="source/ContainerLayout.html#cfg-Ext.layout.ContainerLayout-itemCls">itemCls</a></b> : String<div class="mdesc"><div class="short">An optional extra CSS class that will be added to the container. This can be useful for adding
customized styles to t...</div><div class="long"><p>An optional extra CSS class that will be added to the container. This can be useful for adding
customized styles to the container or any of its children using standard CSS rules. See
<a href="output/Ext.Component.html" ext:cls="Ext.Component">Ext.Component</a>.<a href="output/Ext.Component.html#Ext.Component-ctCls" ext:member="ctCls" ext:cls="Ext.Component">ctCls</a> also.</p>
</p></div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#itemCls" ext:member="#itemCls" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.HBoxLayout-pack"></a><b><a href="source/BoxLayout.html#cfg-Ext.layout.HBoxLayout-pack">pack</a></b> : String<div class="mdesc"><div class="short">Specifies the horizontal alignment of child components. Defaults to 'start'. Acceptable values are:

center : &lt;div cl...</div><div class="long">Specifies the horizontal alignment of child components. Defaults to <tt>'start'</tt>. Acceptable values are:
<ul>
<li><b>center</b> : <div class="sub-desc">
Aligned to the center of the container.
</div></li>
<li><b>end</b> : <div class="sub-desc">
Aligned to the right of the container.
</div></li>
<li><b>justify</b> : <div class="sub-desc">
Justified with both the left and right of the container.
</div></li>
<li><b>start</b> : <div class="sub-desc">
Aligned to the left of the container.
</div></li>
</ul></div></div></td><td class="msource">HBoxLayout</td></tr></tbody></table><a id="Ext.layout.HBoxLayout-props"></a><h2>Public Properties</h2><div class="no-members">This class has no public properties.</div><a id="Ext.layout.HBoxLayout-methods"></a><h2>Public Methods</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Method</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.ContainerLayout-getLayoutItems"></a><b><a href="source/ContainerLayout.html#method-Ext.layout.ContainerLayout-getLayoutItems">getLayoutItems</a></b>()
    :
                                        Array<div class="mdesc"><div class="short">Returns an array of child components.</div><div class="long">Returns an array of child components.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Array</code><div class="sub-desc">of child components</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#getLayoutItems" ext:member="#getLayoutItems" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.ContainerLayout-getTarget"></a><b><a href="source/ContainerLayout.html#method-Ext.layout.ContainerLayout-getTarget">getTarget</a></b>()
    :
                                        Ext.Element<div class="mdesc"><div class="short">Returns the owner component's resize element.</div><div class="long">Returns the owner component's resize element.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Ext.Element</code><div class="sub-desc"></div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#getTarget" ext:member="#getTarget" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr></tbody></table><a id="Ext.layout.HBoxLayout-events"></a><h2>Public Events</h2><div class="no-members">This class has no public events.</div></div>